<template>
  <div class="app-container">
    <div class="app-containerInner">
      <div class="header">
        <div class="line" />
        <div class="text">设备管理</div>
      </div>
      <!-- filter -->
      <filter-form :form="listQuery" :data="filterData" :has-default-operation="false" style="margin-bottom: 10px;">
        <el-button type="primary" size="middle" class="searchBtns" icon="el-icon-search" @click="getListPage">查询</el-button>
        <ul class="tabIcons">
          <li class="tabBtnIcons" :class="{ activeIcon: isActiveBtn }" @click="handleClickTab('first')"><i class="el-icon-menu" /></li>
          <li class="tabBtnIcons" :class="{ activeIcon: !isActiveBtn }" @click="handleClickTab('second')"><i class="el-icon-s-fold" /></li>
          <!--          <li class="tabBtnIcons" :class="{ activeIcon: !isActiveBtn }" @click="handleClickTab('second')"><i class="el-icon-menu" /></li>-->
        </ul>
      </filter-form>
      <!-- filter -->
      <div ref="main" class="tabmain" :class="{ firstmain: !isActiveBtn }">
        <div class="v-flex" style="height: 100%;">
          <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            tooltip-effect="dark"
            style="width: 100%;">
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column align="center" label="设备名称" prop="deviceName" min-width="180" />
            <!-- <el-table-column align="center" label="设备标识" prop="deviceIdentification" width="180" /> -->
            <el-table-column align="center" label="设备类型" width="150">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.device_type" :value="scope.row.deviceType" />
              </template>
            </el-table-column>
            <el-table-column prop="tag" label="设备状态" align="center" width="150">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.device_status" :value="scope.row.deviceStatus" />
              </template>
            </el-table-column>
            <el-table-column prop="tag" label="连接状态" align="center" width="150">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.connect_status" :value="scope.row.connectStatus" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="客户端标识" prop="clientId" width="150" />
            <el-table-column align="center" label="用户名" prop="userName" width="150" />
            <el-table-column align="center" label="密码" prop="password" width="180">
              <template slot-scope="scope">
                <div disable="disable" style="width: 100%;display: flex;justify-content: center;align-items: center;">
                  <i class="el-icon-copy-document" style="cursor: pointer" title="复制" @click="copy(list[scope.$index].password)" />
                  <span v-show="currentIndex !== scope.$index" ref="start">********</span>
                  <span v-show="currentIndex === scope.$index" ref="pWord">{{ list[scope.$index].password }}</span>
                  <i :ind="scope.$index" class="el-icon-view" style="cursor: pointer" @click="setShow(scope.$index, $event)" />
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="190">
              <template slot-scope="scope">
                <span style="margin-right: 10px">
                  <el-tooltip class="item" content="修改" effect="light" placement="top">
                    <el-button circle icon="el-icon-edit" size="mini" type="primary" @click="handleUpdate(scope.row)" />
                  </el-tooltip>
                </span>
                <span style="margin-right: 10px">
                  <el-tooltip class="item" content="查看" effect="light" placement="top">
                    <el-button circle icon="el-icon-view" size="mini" type="primary" @click="handleView(scope.row)" />
                  </el-tooltip>
                </span>
                <span style="margin-right: 10px">
                  <el-tooltip class="item" content="删除" effect="light" placement="top">
                    <el-button circle icon="el-icon-delete" size="mini" type="primary" @click="handleDelete(scope.row)" />
                  </el-tooltip>
                </span>
                <span v-if="scope.row.deviceType == '1' || scope.row.deviceType == '3' ? true : false" style="margin-right: 10px">
                  <el-tooltip class="item" content="topic" effect="light" placement="top">
                    <el-button circle icon="el-icon-menu" size="mini" type="primary" @click="handleTopic(scope.row)" />
                  </el-tooltip>
                </span>
                <span v-if="scope.row.deviceType == '0' ? true : false" style="margin-right: 10px">
                  <el-tooltip class="item" content="实时数据" effect="light" placement="top">
                    <el-button circle icon="el-icon-pie-chart" size="mini" type="primary" @click="gotoInTimeData(scope.row)" />
                  </el-tooltip>
                </span>
                <span v-if="scope.row.deviceType == '1' || scope.row.deviceType == '3' ? true : false" style="margin-right: 10px">
                  <el-tooltip class="item" content="子设备列表" effect="light" placement="top">
                    <el-button circle icon="el-icon-s-operation" size="mini" type="primary" @click="gotoDeviceInfoList(scope.row)" />
                  </el-tooltip>
                </span>
                <span v-if="scope.row.deviceType == '4' ? true : false" style="margin-right: 10px">
                  <el-tooltip class="item" content="通道列表" effect="light" placement="top">
                    <el-button circle icon="el-icon-video-camera" size="mini" type="primary" @click="gotoDeviceChannel(scope.row)" />
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="page-box">
            <pagination :total="total" :page.sync="listQuery.pageNum" :size.sync="listQuery.pageSize" @pagination="getListPage" />
          </div>
          <!-- 分页 -->
        </div>
      </div>
      <div ref="main" class="tabmain" :class="{ secondmain: isActiveBtn }">
        <div class="cardLists">
          <!-- list 循环 -->
          <div v-for="(item,index) in list" :key="index" class="cardChild">
            <div class="product_img">
              <img src="@/assets/images/c6/device-img.png">
            </div>
            <div class="product_info">
              <div class="status">{{ item.state === '1' ? '禁用' : '启用' }}</div>
              <el-tooltip class="item" effect="light" placement="top-start">
                <div slot="content">{{ item.deviceName }}</div>
                <div class="title">{{ item.deviceName }}</div>
              </el-tooltip>
              <div class="props">
                <div class="flex" style="justify-content: space-between;">
                  <div class="prop">
                    <div class="label">设备类型</div>
                    <div class="value">{{ item.deviceTypeName }}</div>
                  </div>
                </div>
                <div class="prop">
                  <div class="label">设备标识</div>
                  <el-tooltip class="item" effect="light" placement="top-start">
                    <div slot="content">{{ item.deviceId }}</div>
                    <div class="value">{{ item.deviceId }}</div>
                  </el-tooltip>
                </div>
              </div>
              <div class="button_box">
                <div class="btn" @click="handleDelete(item)">
                  <i class="el-icon-delete" />
                </div>
                <div class="line" />
                <div class="btn" @click="handleView(item)">
                  <i class="el-icon-s-operation" />
                </div>
                <div v-if="item.deviceType === 'SUBSET' || item.deviceType === 'COMMON'" class="line" />
                <div v-if="item.deviceType === 'SUBSET' || item.deviceType === 'COMMON'" class="btn" @click="gotoInTimeData(item)">
                  <i class="el-icon-pie-chart" />
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="page-box">
          <pagination :total="total" :page.sync="listQuery.pageNum" :size.sync="listQuery.pageSize" @pagination="getListPage" />
        </div>
      </div>
      <!-- 添加或修改设备档案对话框 -->
      <div v-if="open">
        <base-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body width="60%" @updateData="submitForm" @open="opened" @close="closed">
          <el-form ref="form" :model="form" label-width="120px">
            <el-row>
              <el-col :span="11">
                <el-form-item label="客户端标识" prop="clientId" :rules="{ required: true, message: '客户端标识不能为空', trigger: 'blur' }">
                  <el-input v-model="form.clientId" placeholder="请输入客户端标识" @keyup.native="clientId" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="用户名" prop="userName" :rules="{ required: true, message: '用户名不能为空', trigger: 'blur' }">
                  <el-input v-model="form.userName" placeholder="请输入用户名" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="密码" prop="password" :rules="{ required: true, message: '密码不能为空', trigger: 'blur' }">
                  <el-input v-model="form.password" placeholder="请输入密码" show-password type="password" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="设备名称" prop="deviceName" :rules="{ required: true, message: '设备名称不能为空', trigger: 'blur' }">
                  <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="设备类型" prop="deviceType" :rules="{ required: true, message: '设备类型不能为空', trigger: 'change' }">
                  <el-select v-model="form.deviceType" placeholder="请选择设备类型" :disabled="set ? true : false">
                    <el-option v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="设备状态" prop="deviceStatus" :rules="{ required: true, message: '设备状态不能为空', trigger: 'change' }">
                  <el-select v-model="form.deviceStatus" placeholder="请选择设备状态">
                    <el-option v-for="dict in dict.type.device_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="所属产品" prop="productIdentification" :rules="{ required: true, message: '产品标识不能为空', trigger: 'change' }">
                  <el-select v-model="form.productIdentification" :disabled="set ? true : false" placeholder="请选择所属产品">
                    <el-option v-for="item in dictionary.productList" :key="item.productIdentification" :disabled="item.status === 0" :label="item.productName" :value="item.productIdentification" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="设备标识" prop="deviceIdentification" :rules="{ required: true, message: '设备标识不能为空', trigger: 'blur' }">
                  <el-input v-model="form.deviceIdentification" :disabled="set ? true : false" placeholder="请输入设备标识" @keyup.native="deviceIdentification" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="协议类型" prop="protocolType">
                  <el-select v-model="form.protocolType" placeholder="请选择协议类型" :disabled="set ? true : false" :rules="{ required: true, message: '协议类型不能为空', trigger: 'blur' }">
                    <el-option v-for="item in dictionary.protocolOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="经度" prop="deviceLocation.longitude" :rules="{ required: true, message: '设备经度不能为空', trigger: 'blur' }">
                  <el-input v-model="deviceLocation.longitude" placeholder="请输入经度" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="纬度" prop="deviceLocation.latitude" :rules="{ required: true, message: '设备纬度不能为空', trigger: 'blur' }">
                  <el-input v-model="deviceLocation.latitude" placeholder="请输入纬度" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="display: flex; justify-content: center">
              <el-col :span="24">
                <map-view ref="mapView" :device-location="deviceLocation" class="map" @locationChange="locationChange" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </base-dialog>
      </div>
      <!-- topic对话框 -->
      <div v-if="topicDialog.open">
        <base-dialog :show-default-footer="false" :title="topicDialog.title" :visible.sync="topicDialog.open" append-to-body width="80%" @close="cancelTopic">
          <el-table v-loading="topicDialog.loading" :data="topicDialog.list" border fit highlight-current-row tooltip-effect="dark" style="width:100%" max-height="500">
            <el-table-column label="id" align="center" prop="id" />
            <el-table-column label="设备标识" align="center" prop="deviceIdentification" />
            <el-table-column label="topic" align="center" prop="topic" />
            <el-table-column label="发布者" align="center" prop="publisher" />
            <el-table-column label="订阅者" align="center" prop="subscriber" />
            <el-table-column label="备注" align="center" prop="remark" />
          </el-table>
          <pagination v-show="topicDialog.total > 0" :total="topicDialog.total" :page.sync="topicDialog.listQuery.pageNum" :size.sync="topicDialog.listQuery.pageSize" @pagination="selectTopicPageList" />
        </base-dialog>
      </div>
      <!-- topic对话框 -->
    </div>
  </div>
</template>
<script>
import { selectTopicPageList } from '@/api/cms/monitor/device'
import { tableMixin } from '@/utils/public'
import { getListPage, getDeviceById, updateDevice, addDevice, deleteDevice, validationFindOneByDeviceIdentification, validationFindOneByClientId, getPageDeviceInfo } from '@/api/cms/winglinks/device'
import { getAllProduct as selectProductList } from '@/api/cms/winglinks/product'
import mapView from './components/mapView'
export default {
  name: 'Device',
  dicts: ['device_status', 'device_type', 'connect_status'],
  components: { mapView },
  mixins: [tableMixin],
  data() {
    return {
      dictionary: {
        deviceType: [{ label: '普通设备', value: '0' }, { label: '网关设备', value: '1' }, { label: 'Lora转4G网关', value: '3' }],
        deviceStatus: [{ label: '启用', value: '1' }, { label: '禁用', value: '0' }],
        protocolOptions: [{ label: 'MQTT', value: 'MQTT' }, { label: 'HTTP', value: 'HTTP' }, { label: 'TCP', value: 'TCP' }, { label: 'UDP', value: 'UDP' }],
        productList: []
      },
      // 表格高度
      height: 0,
      tableKey: 0,
      list: null,
      current: 1,
      total: 0,
      listLoading: false,
      isActiveBtn: true,
      // 顶部操作栏配置
      filterData: {
        deviceName: {
          key: 'deviceName',
          type: 'input',
          title: '设备名称',
          placeholder: '请输入设备名称'
        },
        productIdentification: {
          key: 'productIdentification',
          type: 'select',
          title: '产品',
          placeholder: '选择产品类型',
          props: { label: 'productName', value: 'productIdentification' },
          options: [],
          clearable: false
        }
      },
      // 查询参数
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        deviceName: null,
        productIdentification: null
      },

      // 各个状态的设备数量
      onlineCount: 0,
      offlineCount: 0,
      initCount: 0,

      // 密码显示隐藏
      show: true,
      currentIndex: null,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        clientId: null,
        userName: null,
        password: null,
        appId: null,
        authMode: null,
        deviceIdentification: null,
        deviceName: null,
        connector: null,
        deviceStatus: null,
        productIdentification: null,
        protocolType: null,
        deviceType: null
      },
      deviceLocation: {
        latitude: null,
        longitude: null
      },
      // 修改禁用标识
      set: false,
      lonLat: [],

      // topic弹窗配置
      topicDialog: {
        open: false,
        title: 'topic列表',
        list: [],
        total: 0,
        loading: false,
        listQuery: {
          pageNum: 0,
          pageSize: 10,
          deviceIdentification: null
        }
      }

    }
  },
  watch: {
  },
  created() {
    console.log(this.dict)
  },
  mounted() {
    this.getListPage()
    this.selectProductList()
  },
  methods: {
    // 获取产品列表
    selectProductList() {
      selectProductList({}).then(response => {
        this.dictionary.productList = response.data
        this.filterData.productIdentification.options = response.data
      })
    },
    // 查询列表信息
    getListPage() {
      this.listLoading = true
      // 查询列表信息
      getPageDeviceInfo(this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },

    // 显示隐藏
    setShow(index) {
      if (this.show) {
        this.currentIndex = index
        this.show = false
      } else {
        this.currentIndex = null
        this.show = true
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id
      this.confirmBox('是否确认删除设备档案编号为"' + ids + '"的数据项？').then(() => {
        // 删除信息
        deleteDevice(ids).then(() => {
          this.notifiySuccess('删除成功!')
          this.getListPage() // 查询列表信息
        })
      }).catch(() => {})
    },
    /** 修改按钮操作 */
    handleView(row) {
      if (row.deviceType === 'SUBSET') {
        const query = {
          id: row.id,
          nodeId: row.nodeId,
          deviceType: row.deviceType
        }
        this.$router.push({ path: '/cms/device-data/deviceInfoDetail', query: query })
      } else {
        const query = {
          id: row.id,
          deviceIdentification: row.deviceId,
          deviceType: row.deviceType
        }
        this.$router.push({ path: '/cms/device-data/detail', query: query })
      }
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.check = {
        clientId: true,
        deviceIdentification: true
      }
      this.reset()
      this.set = true
      const id = row.id
      getDeviceById(id).then((response) => {
        this.form = response.data
        if (response.data.deviceLocation !== null) {
          this.lonLat = [
            response.data.deviceLocation.longitude,
            response.data.deviceLocation.latitude
          ]
          this.deviceLocation.longitude = response.data.deviceLocation.longitude
          this.deviceLocation.latitude = response.data.deviceLocation.latitude
        } else {
          this.lonLat = []
        }
        this.open = true
        this.title = '修改设备档案'
      })
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.check = {
        clientId: false,
        deviceIdentification: false
      }
      this.reset()
      this.set = false
      this.open = true
      this.title = '添加设备档案'
    },
    // 复制
    copy(shareiot) {
      var input = document.createElement('input')
      input.value = shareiot
      document.body.appendChild(input)
      input.select()
      document.execCommand('Copy')
      document.body.removeChild(input)
      this.notifiySuccess('复制成功')
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        clientId: null,
        userName: null,
        password: null,
        deviceIdentification: null,
        deviceName: null,
        connector: null,
        deviceDescription: null,
        deviceStatus: null,
        connectStatus: null,
        deviceTags: null,
        productIdentification: null,
        protocolType: null,
        deviceType: null,
        remark: null
      }

      this.deviceLocation = {
        latitude: null,
        longitude: null
      }
    },
    // 新增或修改设备提交
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            this.deviceLocation.deviceIdentification = this.form.deviceIdentification
            this.form.deviceLocation = this.deviceLocation
            console.log(this.form)
            updateDevice(this.form).then((response) => {
              this.notifiySuccess('修改成功')
              this.open = false
              this.getListPage()
            })
          } else {
            this.deviceLocation.deviceIdentification = this.form.deviceIdentification
            this.deviceLocation.id = this.form.id
            this.form.deviceLocation = this.deviceLocation
            console.log(this.form)
            addDevice(this.form).then((response) => {
              this.notifiySuccess('新增成功')
              this.open = false
              this.getListPage()
            })
          }
        }
      })
    },
    // 新增或修改弹窗取消事件
    cancel() {
      this.open = false
      this.reset()
    },

    // 客户端标识校验
    clientId() {
      validationFindOneByClientId(this.form.clientId).then(
        (res) => {
          if (res.code === 200) {
            this.check.clientId = true
            this.notifiySuccess('客户端标识校验通过')
          }
        }
      )
    },
    // 设备标识校验
    deviceIdentification() {
      validationFindOneByDeviceIdentification(this.form.deviceIdentification).then((res) => {
        if (res.code === 200) {
          this.check.deviceIdentification = true
          this.notifiySuccess('设备标识校验通过')
        }
      })
    },
    // 打开topic弹窗
    handleTopic(row) {
      this.topicDialog.listQuery.deviceIdentification = row.deviceIdentification
      this.topicDialog.loading = true
      this.selectTopicPageList()
      this.topicDialog.open = true
    },
    selectTopicPageList() {
      selectTopicPageList(this.topicDialog.listQuery).then(response => {
        this.topicDialog.list = response.data.records
        this.topicDialog.total = response.data.total
        this.topicDialog.loading = false
      }).catch(() => {
        this.topicDialog.loading = false
      })
    },
    // topic对话框取消按钮
    cancelTopic() {
      this.topicDialog.open = false
    },

    // 跳转到实时数据页面
    gotoInTimeData(row) {
      const query = {
        deviceIdentification: row.deviceIdentification,
        productIdentification: row.productIdentification,
        deviceType: row.deviceType
      }
      if (row.deviceType === 'COMMON' && row.model === 'ATMOSPHERE') {
        this.$router.push({ path: '/cms/device-data/meteorologicalMonitor', query: { 'row': JSON.stringify(query) }})
      } else if (row.deviceType === 'COMMON' && row.model === 'ICECOVER') {
        this.$router.push({ path: '/cms/device-data/iceCream', query: { 'row': JSON.stringify(query) }})
      } else if (row.deviceType === 'COMMON' && row.model === 'IMAGE') {
        this.$router.push({ path: '/cms/device-data/iceImages', query: { 'row': JSON.stringify(query) }})
      } else if ( row.deviceType === 'SUBSET' && row.model === 'TEMP') {
        this.$router.push({ path: '/cms/device-data/temperature', query: { 'row': JSON.stringify(query) }})
      } else if (row.deviceType === 'SUBSET' && row.model === 'DPMT') {
        this.$router.push({ path: '/cms/device-data/displacement', query: { 'row': JSON.stringify(query) }})
      } else if (row.deviceType === 'SUBSET' && row.model === 'RANG') {
        this.$router.push({ path: '/cms/device-data/distance', query: { 'row': JSON.stringify(query) }})
      } else if (row.deviceType === 'SUBSET' && row.model === 'DPVN') {
        this.$router.push({ path: '/cms/device-data/inclinationVibration', query: { 'row': JSON.stringify(query) }})
      }
    },
    // 跳转到子设备列表页面
    gotoDeviceInfoList(row) {
      this.$router.push({ path: '/cms/device-data/deviceInfo', query: row })
    },

    // 跳转设备通道列表页面
    gotoDeviceChannel(row) {
      this.$router.push({ path: '/cms/device-data/channelList', query: row })
    },

    // 定位变化
    locationChange(centerLocation) {
      console.log('locationChange')
      this.deviceLocation.longitude = centerLocation.longitude
      this.deviceLocation.latitude = centerLocation.latitude
    },
    opened() {
    },
    closed() {
      this.reset()
    },
    handleClickTab(tab) {
      if (tab === 'first') {
        this.isActiveBtn = true
      } else {
        this.isActiveBtn = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .app-container{
    position: relative;
  }
  .app-containerInner{
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px rgba(34,52,94,0.16);
    height: 100%;
    padding: 20px;
    position: relative;
    /deep/ .filter-form__container .filter-item .el-form-item .el-form-item__content{
      height: 36px!important;
      line-height: 36px!important;
    }
    /deep/ .filter-form__container .filter-item .el-input{
      height: 36px!important;
      line-height: 36px!important;
    }
    /deep/ .filter-form__container .filter-item .el-input__inner{
      height: 36px!important;
      line-height: 36px!important;
    }
    /deep/ .el-form .searchBtns.el-button{
      padding: 10px 20px;
      background: #0082cd;
      border-color: #0082cd;
      color: #fff;
      border-radius: 2px;
    }
    /deep/ .el-form .searchBtns.el-button:hover{
      background: #0595e9;
      border-color: #0595e9;
    }
    /deep/ .el-button.buttonnew{
      border:none;
      padding:0;
      font-size: 20px;
      color: #0082CD;
      background: transparent;
    }
    /deep/ .el-table--border th{
      background: #dde7f2!important;
      border-color: #dde7f2!important;
      color: #000000;
      font-weight: bold;
      height: 44px;
    }
    /deep/ .el-table td.el-table__cell{
      height: 44px;
      color: #22335e;
    }
    /deep/ .el-table tr:nth-child(even){
      background: rgba(221,231,242,0.20);
    }
    .tabIcons{
      float:right;
      display: flex;
      align-items: center;
    }
    .tabBtnIcons{
      width: 36px;
      height: 36px;
      background: #dde7f2;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9095A7;
      cursor: pointer;
      i{
        font-size: 20px;

      }
      &.activeIcon{
        background: #0082cd;
        color: #fff;
      }
    }
    .tabmain{
      display: none;
      height: calc(100% - 80px);
      &.firstmain{
        display:block;
        overflow: scroll;
      }
      &.secondmain{
        display:block;
        overflow: scroll;
      }
    }
  }
  .header{
    height: 25px;
    width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    .line{
      width: 5px;
      height: 90%;
      background-color: #00afff;
      margin-right: 10px;
      border-radius: 4px;
    }
    .text{
      line-height: 100%;
      font-weight: 600;
      font-size: 18px;
    }
  }

  // 卡片列表样式
  .cardLists {
    padding: 5px;
    /* 父盒子设置为伸缩盒子*/
    display: flex;
    /* wrap:  在必要的时候进行换行*/
    flex-wrap: wrap;
    /* flex-start:  默认从头开始排列*/
    justify-content: flex-start;
  }
  .cardChild {
    height: 196px;
    padding: 16px;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 0 4px #00000026;
    border-radius: 8px;
    background-image: url("../../../../assets/images/c6/blue-bg.png");
    background-color: rgba(0,0,0,0.02);
    background-size: 104% 104%;
    background-repeat: no-repeat;
    /* 18%:  默认每一个列表占18%*/
    flex: 0 0 24%;
    /* 右边距，默认使用css函数去计算 */
    margin-right: calc(4% / 4);
    margin-bottom: 20px;
    position: relative;
    .status{
      width: 57px;
      height: 25px;
      border-radius: 6px 0 0 6px;
      font-size: 12px;
      font-weight: 500;
      line-height: 25px;
      text-align: center;
      position: absolute;
      right: 0;
      top: 16px;
      background: #d9dffd;
      color: #1966ff;
    }
    .product_img{
      position: absolute;
      right: 20px;
      top: 50px;
      img{
        cursor: pointer;
        width: 100px;
      }
    }
    .product_info{
      padding-left: 16px;
      max-width: calc(100% - 88px);
      .title{
        font-size: 18px;
        font-weight: 700;
        color: #050708;
        line-height: 40px;
        height: 40px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .props{
        margin-top: 10px;
        .flex{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .prop{
          margin-bottom: 10px;
          .label{
            font-size: 14px;
            font-weight: 400;
            color: #666;
            line-height: 14px;
          }
          .value{
            font-size: 16px;
            font-weight: 600;
            color: #050708;
            line-height: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 6px;
          }
        }
      }
      .button_box{
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 16px;
        bottom: 16px;
        margin-top: 20px;
        height: 25px;
        border-radius: 40px;
        justify-content: space-around;
        padding: 0 10px;
        align-items: center;
        border: 3px solid #1a66ff;
        .line{
          width: 2px;
          height: 70%;
          background-color: #DCDFE6;
        }
        .btn{
          width: 25px;
          text-align: center;
          color: #1a66ff;
          i{
            font-weight: bold;
          }
        }
      }
    }
  }
  /* 去除每行尾多余的边距 */
  .cardChild:nth-child(4n) {
    margin-right: 0;
  }
</style>
